<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:insert="fragments/head">
</head>

<body>
<header th:insert="fragments/header">
</header>

<main>
    <div id="index-banner" class="parallax-container">
        <div class="section no-pad-bot">
            <div class="container">
                <br><br>
                <h1 class="header center white-text">Profesores</h1>
                <div class="row center">
                    <h5 class="header col s12 light">Se parte de nuestro gran staff de profesores</h5>
                </div>
                <br>
                <div class="row center">
                    <a th:href="@{/profesores/add}" class="waves-effect waves-light btn-large">Únete
                        a Nosotros</a>
                </div>
                <br><br>
            </div>
        </div>
        <div class="parallax"><img src="/img/docentes.jpg" alt="Unsplash teachers background"></div>
    </div>
    <div class="section">
        <div th:switch="profesores" class="container">
            <div th:case="*" class="row">
                <div class="col s12 center">
                    <h4>Lista de Profesores</h4>
                    <br>
                    <table class="highlight responsive-table">
                        <thead>
                        <tr>
                            <th scope="col">id</th>
                            <th scope="col">Nombres</th>
                            <th scope="col">Apellido</th>
                            <th scope="col">E-mail</th>
                            <th scope="col">Descripción</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="profesor : ${profesores}">

                            <th scope="row" th:text="${profesor.id_profesor}"></th>
                            <td th:text="${profesor.nomProfesor}"></td>
                            <td th:text="${profesor.apeProfesor}"></td>
                            <td th:text="${profesor.correoProfesor}"></td>
                            <td th:text="${profesor.descProfesor}"></td>

                            <td>
                                <div>
                                    <span>
                                    <a class="btn-floating waves-effect waves-light btn-small"
                                       th:href="|/profesores/${profesor.id_profesor}|"><i
                                            class="material-icons">chevron_right
                                    </i></a>
                                    </span>
                                    <span>
                                    <a th:href="@{/profesores/edit/{id_profesor}
                                    (id_profesor=${profesor.id_profesor})}"
                                       class="btn-floating waves-effect waves-light btn-small yellow darken-1"><i
                                            class="material-icons">edit</i>
                                    </a>
                                    </span>
                                    <span>
                                    <a th:href="@{/profesores/delete/{id_profesor}
                                (id_profesor=${profesor.id_profesor})}"
                                       class="btn-floating waves-effect waves-light btn-small red lighten-1"><i
                                            class="material-icons">delete_forever</i>
                                    </a>
                                    </span>
                                </div>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<br><br>

<footer class="page-footer teal" th:insert="fragments/footer">

</footer>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/materialize.js"></script>
<script src="/js/init.js"></script>

</body>
</html>